Вход

Просмотр полной версии : Как определить загрузилось ли изображение

Andrei
06.06.2010, 07:22
Здравствуйте!

Как определить с помощью jquery окончание загрузки изображения ?
exec
06.06.2010, 07:42
$(image).bind('load', handler);
Andrei
06.06.2010, 08:13
exec,
У меня url подгружается через ajax, нужно запустить анимацию появления после загрузки изображения
Как в этом случае определить ?

$.ajax({
type: "POST",
url: "/rand_header.php",
data: "userHour="+myHour,
success: function(pic){
$('#header').css('backgroundImage', 'url('+pic+')');
$('#header').animate({'opacity':'1'}, 230);
}
});
exec
06.06.2010, 08:48
Andrei, background нельзя анимаировать через animate.

$.ajax({
type: "POST",
url: "/rand_header.php",
data: "userHour="+myHour,
success: function(pic){
$('#header').append('<img style="opacity: 0;" src="' + pic + '" />').bind('load', function () {
$(this).fadeIn();
});
}
});
Andrei
06.06.2010, 09:04
exec, Я анимирую DIV с background
Andrei
06.06.2010, 09:12
exec, a если так ?

$.ajax({
type: "POST",
url: "/rand_header.php",
data: "userHour="+myHour,
success: function(pic){
myImage = new Image();
function write(){
$('#header').css('backgroundImage', 'url('+myImage.src+')');
$('#header').animate({'opacity':'1'}, 230);
}

myImage.onload = write;
myImage.src = '/themes/images'+pic;
}
});
exec
06.06.2010, 09:17
Ну тогда лучше так

$.ajax({
type: "POST",
url: "/rand_header.php",
data: "userHour="+myHour,
success: function(pic){
$('<img src="' + pic + '" />').bind('load', function () {
$('#header').css('backgroundImage', this.src).fadeIn(230);
});
});
}
});
Andrei
06.06.2010, 09:46
Работает, спасибо!
С fadeIn почему-то не работало, я заменил на animate
Weeee
20.07.2010, 17:07
Способ .load не работает в Opera 10.
Kolyaj
20.07.2010, 17:23
Работает.
Weeee
20.07.2010, 17:27
Если изображение не в кеше.
Kolyaj
20.07.2010, 17:38
var img = new Image();
img.onload = function() { alert('load'); };
img.src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif';
Обновляю страницу -- всё работает.
Weeee
20.07.2010, 17:56
$("img").each( function() {
$(this).bind('load', function () {
alert('load');
});
});

А так?
Kolyaj
20.07.2010, 18:03
Ну можно данный код на onload повесить, чтобы уж наверняка все изображения на этот момент загружены были.
Weeee
20.07.2010, 18:08
С парой сотен изображений такой подход не больно оправдан :)
Kolyaj
20.07.2010, 18:12
Weeee,
это был сарказм. Вы вешаете обработчик на событие, которое уже произошло. Что вы хотите получить? Если уж сильно хочется именно такой код, то проверяйте свойство complete у изображений.
Weeee
20.07.2010, 18:25
Я его, естествено, тоже проверяю, в опере все равно не работает :)

if (this.complete) {
$(this).trigger('load');
}
Weeee
20.07.2010, 18:32
Это уже не смешно даже.
$(img").each( function() {

$(this).bind('load', function () {
alert('bind');
});

if (this.complete){
alert('trig');
$(this).trigger('load');
}


});

В опере ни одного сообщения не появляется.
Weeee
20.07.2010, 18:53
if (this.complete){
alert('hello1');
} else $(this).bind('load', function(){
alert('hello2');
});

Если изображения поместить в блок со своейством display: none;, то Opera 10 показывается hello2. Если же убрать display: none;, то мы увидим только hello1.

А если изображение уже было в кеше, то вообще никакого сообщения мы не увидим!
Weeee
20.07.2010, 20:38
Короче говоря, как я и говорил, не работает.
Kolyaj
20.07.2010, 20:44
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].complete) {
alert('loaded');
} else {
imgs[i].onload = function() {
alert('loaded');
}
}
}


Всё работает.
рони
20.07.2010, 20:58
а так? ....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title></title>
</head>

<body> <div id='img_hide' style="display: none"></div>
<script language="JavaScript" type="text/javascript">
function img_load() {
for (var b = document.getElementById("img_hide"), d = arguments.length, c = 0; c < arguments.length; c++) {
var a = new Image;
a.onload = function () {
b.appendChild(this);
if (b.childNodes.length == d) {
b.style.display = ""
}
};
a.onerror = function () {
var e = document.createTextNode(this.src + " \u043d\u0435\u0442 ");
b.appendChild(e);
if (b.childNodes.length == d) {
b.style.display = ""
}
};
a.src = arguments[c];
(a.fileSize !== undefined ? a.fileSize > -1 : a.width) && a.onload()
}
};
img_load('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif','logo.gif','http://javascript.ru/forum/images/ca_serenity/misc/logo.gif')
</script>
</body>
</html>
subzey
21.07.2010, 21:56
Опера, кстати, меня что-то с ветки 10.50 не радует.
Не по-норвежски как-то они браузер начали делать.
utb
06.11.2014, 14:10
а как можно проверить подгрузилось изображение или нет из css ?)